<template>
    <div class="container">
        <van-nav-bar title="个人中心" left-text="返回" left-arrow @click-left="onClickLeft" />
        <div class="main">
            <div class="profile">
                <span>头像</span>
                <span><img src='@/static/imgs/profile.jpg'></span>
            </div>
            <div>
                <span>昵称</span>
                <span>{{userInfo.name}}
                    <van-icon name="arrow" /></span>
            </div>
            <div></div>
            <div>
                <span>手机号</span>
                <span>{{userInfo.phone}}
                    <van-icon name="arrow" /></span>
            </div>
            <div>
                <span>生日</span>
                <span>{{userInfo.birthday}}
                    <van-icon name="arrow" /></span>
            </div>
            <div>
                <span>地址</span>
                <span>{{userInfo.address}}
                    <van-icon name="arrow" /></span>
            </div>
            <div>
                <span>邮箱</span>
                <span>{{userInfo.mailbox}}
                    <van-icon name="arrow" /></span>
            </div>
            <div>
                <span>历史订单</span>
                <span>
                    <van-icon name="arrow" @click="orderDetails"/></span>
            </div>
        </div>
        <van-button type="danger" size="large" @click="loginOut">退出登录</van-button>
    </div>
</template>

<script>
    import {
        mapGetters
    } from 'vuex';

    export default {
        name: 'Personal',
        data() {
            return {}
        },
        async created() {
            const token = localStorage.getItem('token');
            this.$store.dispatch('getUserInfo', token);
        },
        methods: {
            onClickLeft() {
                this.$router.push('/home');
            },
            loginOut() {
                localStorage.removeItem('token');
                this.$router.push('/home');
            },
            // 订单详情
            orderDetails(){
                this.$router.push('/orderdetails')
            }
        },
        computed: {
            ...mapGetters(['userInfo'])
        }
    }
</script>

<style lang='less' scoped>
    .container {
        .main {
            margin-bottom: 20px;

            div {
                display: flex;
                justify-content: space-between;
                padding: 15px 0;
                border-bottom: 1px solid #ccc;
                margin: 0 20px;

                &:nth-child(3) {
                    height: 10px;
                    padding: 0;
                    background: rgb(241, 241, 241);
                    border-bottom: none;
                }

                &:nth-child(2) {
                    border-bottom: none;
                }
            }

            .profile {
                span {
                    &:first-child {
                        margin-top: 15px;
                    }

                    &:last-child {
                        width: 50px;
                        height: 50px;
                        border-radius: 50%;
                        overflow: hidden;
                        display: inline-block;

                        img {
                            width: 50px;
                            height: 50px;
                        }
                    }
                }
            }
        }
    }
</style>